<template>
  <div class="container">
    <!-- 左侧菜单栏 -->
    <el-menu
        mode="vertical"
        @select="handleMenuSelect"
        background-color="#f5f5f5"
        text-color="#333"
        active-text-color="#409EFF"
        style="width: 200px; height: 100vh;"
    >
      <el-menu-item index="home">静水压力梯度计算</el-menu-item>
      <el-menu-item index="user">上覆地层压力回归</el-menu-item>
      <el-menu-item index="setting">伊顿指数矫正</el-menu-item>
    </el-menu>

    <!-- 右侧标签页区域 -->
    <div class="tab-content">
      <el-tabs
          v-model="activeTab"
          type="card"
          editable
          @edit="handleTabEdit"
          style="height: 100vh; border-left: 1px solid #eee;"
      >
        <!-- 动态渲染标签页 -->
        <el-tab-pane
            v-for="tab in openedTabs"
            :key="tab.index"
            :label="tab.title"
            :name="tab.index"
        >
          <!-- 动态组件：根据当前标签渲染对应的页面组件 -->
          <component :is="tab.component"></component>
        </el-tab-pane>
      </el-tabs>
    </div>
  </div>
</template>

<script>
// 导入需要展示的页面组件（实际项目中替换为你的组件）
import JsylMd from "@/views/Jsfx/NhgJs.vue";
import SfdcYl from "@/views/Jsfx/ObgJs.vue";
import EatonJz from "@/views/Jsfx/EatonJz.vue";

export default {
  components: {
    JsylMd,
    SfdcYl,
    EatonJz
  },
  data() {
    return {
      // 当前激活的标签页（对应菜单的index）
      activeTab: 'home',
      // 已打开的标签页列表（初始默认打开首页）
      openedTabs: [
        { index: 'home', title: '静水压力梯度计算', component: 'JsylMd' }
      ],
      // 菜单与组件的映射关系（关键：菜单index对应组件名）
      menuMap: {
        home: { title: '静水压力梯度计算', component: 'JsylMd' },
        user: { title: '上覆地层压力回归', component: 'SfdcYl' },
        setting: { title: '伊顿指数矫正', component: 'EatonJz' },
      }
    }
  },
  methods: {
    // 点击菜单时触发：添加或切换标签页
    handleMenuSelect(index) {
      // 检查标签是否已打开
      const isOpened = this.openedTabs.some(tab => tab.index === index)

      if (!isOpened) {
        // 未打开则新增标签（从menuMap中获取对应配置）
        this.openedTabs.push({
          index,
          title: this.menuMap[index].title,
          component: this.menuMap[index].component
        })
      }

      // 切换到当前标签
      this.activeTab = index
    },
    // 处理标签页的添加/删除
    handleTabEdit(targetName, action) {
      if (action === 'remove') {
        // 防止删除最后一个标签
        if (this.openedTabs.length <= 1) {
          this.$message.warning('至少保留一个标签页')
          return
        }

        // 过滤掉要删除的标签
        this.openedTabs = this.openedTabs.filter(tab => tab.index !== targetName)

        // 如果删除的是当前激活的标签，自动切换到最后一个标签
        if (targetName === this.activeTab) {
          this.activeTab = this.openedTabs[this.openedTabs.length - 1].index
        }
      }
    }
  }
}
</script>

<style scoped>
.container {
  margin-top: -70px;
  display: flex;
}
.tab-content {
  flex: 1;
  overflow: hidden;
}
</style>
